<!-- 具名插槽 -->
<template>
  <div>
    <div class="heaser">
      <span class="slot-children">头部</span>
      <slot name="header" :text="headerMessage" :count="2"></slot>
    </div>
    <div class="main">
      <span class="slot-children">主体</span>
      <slot :text="mainMessage" :count="2"></slot>
    </div>
    <div class="footer">
      <span class="slot-children">页脚</span>
      <slot name="footer" :text="footerMessage" :count="2"></slot>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      headerMessage: '头部数量：',
      mainMessage: '主体数量：',
      footerMessage: '底部数量：',
    }
  },
}
</script>

<style lang="scss" scoped>
.slot-children {
  color: rgb(15, 238, 238);
}
</style>
